<template>
  <div class="commission-detail">
    <div class="commission-detail__title-nav">
      <div class="commission-detail__title-tab">
        本月
      </div>
      <div class="commission-detail__title-tab">
        上月
      </div>
    </div>
    <div class="commission-detail-cell commission-detail-cell--out">
      <div class="commission-detail-cell__container">
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">红利</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.cost.bonus"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.cost.bonus"></tween-number>
          </div>
        </div>
       
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">平台费</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.cost.platfee"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.cost.platfee"></tween-number>
          </div>
        </div>
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">存提手续费</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.cost.rechargeFee + commissionData.thisMonth.cost.withdrawFee"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.cost.rechargeFee + commissionData.lastMonth.cost.withdrawFee"></tween-number>
          </div>
        </div>
      </div>
      <div class="commission-detail-cell__main-intro">
        支出费用=红利+平台费+存提手续费
      </div>
    </div>

    <div class="commission-detail-cell commission-detail-cell--in">
      <div class="commission-detail-cell__container">
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">公司总盈利</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.totalWin"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.totalWin"></tween-number>
          </div>
        </div>
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">公司净盈利</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.netWin"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.netWin"></tween-number>
          </div>
        </div>
         <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">返水</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.cost.rebeat"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.cost.rebeat"></tween-number>
          </div>
        </div>
        <div class="commission-detail-cell__main">
          <div class="commission-detail-cell__title">上月累计</div>
          <div class="commission-detail-cell__main-count">
            <tween-number :value="commissionData.thisMonth.lastAmount"></tween-number>
          </div>
          <div class="commission-detail-cell__sub-count">
            <tween-number :value="commissionData.lastMonth.lastAmount"></tween-number>
          </div>
        </div>
      </div>
      <div class="commission-detail-cell__main-intro">
        下级会员佣金=（公司总输赢-支出费用+上月累计）x 佣金比例 - 返水
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "commission-detail",

  props: {
    commissionData: {
      type: Object,
    }
  },

  mounted() {
  },
};
</script>

<style lang="scss" scoped>
  @include b(commission-detail) {
    height:147px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 0 100%;

    @include e(title-nav) {
      display: flex;
      flex-flow: column;
      width: 70px;
      height: 100%;
      padding-top: 86px;
    }
    @include e(title-tab) {
      font-size: $--font-size-small;
      font-weight: bold;
      margin-bottom: 22px;
    }

  }

  @include b(commission-detail-cell) {
    box-shadow:0px 6px 30px 0px rgba(0,0,0,0.05);
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    flex: 1 0 0;

    @include m(out) {
      width:496px;
    }
    @include m(in) {
      width: 589px;
    }
    @include e(container) {
      display: flex;
      flex: 0 0 100%;
      height: 117px;
    }
    @include e(main) {
      flex: 1 0 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;
      margin: 12px 0;
      border-right: $--border-base;

      &:last-of-type {
        border-right: 0;
      }
    }
    @include e(title) {
      font-size: $--font-size-small;
      margin-bottom: 14px;
    }
    @include e(main-count) {
      font-weight: bold;
      margin-bottom: 20px;
    }
    @include e(sub-count) {
      font-weight:bold;
      color: $--color-info;
    }
    @include e(main-intro) {
      flex: 0 0 80%;
      text-align: center;
      color: $--color-info;
      margin: 4px auto 0;
      border-top: $--border-base;
      font-size: $--font-size-small;
    }

  }
</style>
